<template>
	<view class="page-user">
		<view class="address-list">
			<radio-group v-for="item in getAddrLists">
				<view class="addr-list">
					<view class="list-con">
						<view class="tops flex-row">
							<text class="name">{{item.name}}</text>
							<text class="phone">{{item.tel}}</text>
							<!-- <view class="moren-defalut" :class="item.is_default == 1 ?'':'hide'">默认</view> -->
						</view>
						<view class="address">{{item.addr_text}}</view>
						<view class="arrow"><text class="iconfont icon-fanhui1"></text></view>
					</view>
					<view class="list-btm flex-row-between">
						<view class="moren" :class="item.is_default ? 'act':''" @click="setDefaultAddr(item._id)">
							<text class="iconfont icon-yuanquan"></text>
							默认地址
						</view>
						<view class="caozuo" @click="reviseAddres">
							<text class="yticon icon-bianji" style="font-size: 14px;"></text>
							<text><text class="shanchu">编辑</text></text>
						</view>
						<view class="caozuo">
							<text class="yticon icon-iconfontshanchu1"></text>
							<text><text class="shanchu" @click="remmoveAddr(item._id)">删除</text></text>
						</view>
					</view>
				</view>
			</radio-group>
			
			<view class="empty" :class="getAddrLists==''?'act':''">
				<text class="iconfont icon-zanwushuju"></text>
				<view class="cont">您还没有收货地址</view>
			</view>
			<view class="add act" @click="navTo('/pages/address/addressManage')">
				<!-- <benIcon name="jiahao1" size="16" color="#C2132A"></benIcon> -->
				<text class="yticon icon-jia2"></text>
				添加收货地址
			</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				requt: 'https://4de16698-d9f4-443a-b416-ef1037cce952.bspapp.com/http',
				getAddrLists:[],
				act:true,
			}
		},
		onShow() {
			this.getAddrList()
			// this.$forceUpdate()
		},
		methods:{
			// 获取收货地址列表接口
			getAddrList(){
			let uid = uni.getStorageSync('uid');
			let token = uni.getStorageSync('token');
			uni.request({
				url: this.requt + '/order/getAddrList',
				method: 'POST',
				header:{
					token //自定义请求头信息
				},
				data:{
					uid,
				},
				success: res => {
					// console.log(res);
					this.getAddrLists = res.data.data;
					console.log(this.getAddrLists);
				}
			});
			},
			// 编辑地址信息
			reviseAddres(){
				uni.navigateTo({
					url: './addressManage'
				});

			},
			//删除地址接口
			remmoveAddr(_id){
				let uid = uni.getStorageSync('uid');
				let token = uni.getStorageSync('token');
				uni.request({
					url: this.requt + '/order/del_addr',
					header:{
						token //自定义请求头信息
					},
					method: 'POST',
					data: {
						uid,
						_id
					},
					success: res => {
						console.log(res);
						this.getAddrList()
					}
				});
			},
			
			//设置默认收货地址接口
			setDefaultAddr(item){
				let uid = uni.getStorageSync('uid');
				let token = uni.getStorageSync('token');
				uni.request({
					url: this.requt + '/order/set_default_addr',
					method: 'POST',
					header:{
						token //自定义请求头信息
					},
					data:{
						uid,
						_id:item
					},
					success: res => {
						console.log(res.data.msg);
						
						this.getAddrList()
					}
				});
			},
		}
	}
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}

uni-radio-group {
	display: block;
	width: 750upx;
}

.address-list .addr-list .list-con .tops .moren-defalut.hide {
	display: none;
}

.address-list {
	width: 750upx;
	padding: 0 32upx 32upx;
	overflow: hidden;
	min-width: 100%;
	display: block;

	.addr-list {
		background: #fff;
		width: 690upx;
		box-shadow: 0px 10px 28px rgba(0, 0, 0, 0.08);
		display: block;
		border-radius: 16upx;
		overflow: hidden;
		box-sizing: border-box;
		margin-top: 40upx;

		.list-con {
			border-bottom: 1px solid #f5f5f7;
			padding: 22upx;
			position: relative;
			display: block;
			overflow: hidden;
			width: 690upx;

			.arrow {
				position: absolute;
				height: 80upx;
				width: 80upx;
				text-align: center;
				line-height: 80upx;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}

			.tops {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 0 20upx;
				font-size: 28upx;
				color: #333;

				.phone {
					margin-left: 20upx;
				}

				.moren-defalut {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 80upx;
					height: 40upx;
					margin-left: 40upx;
					border-radius: 30upx;
					border: 1px solid $color1;
					font-size: 26upx;
					color: $color1;
				}
			}

			.address {
				padding: 0upx 60upx 0 0;
				box-sizing: border-box;
				font-size: 28upx;
				color: #999;
			}
		}

		.list-btm {
			padding: 20upx;
			font-size: 28upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.moren {
				color: #333333;

				.iconfont {
					width: 28upx;
					height: 28upx;
					margin-right: 10upx;
					color: #999999;
					font-size: 30upx;
				}

				&.act {
					.iconfont {
						color: $color1;

						&:before {
							content: '\e67a';
						}
					}
				}
			}

			.caozuo {
				color: #333;
				display: inline-flex;
				align-items: center;
				.iconImg {
					width: 32rpx;
					height: 32rpx;
				}
				.bianji {
					display: inline-block;
					margin: 0 20upx 0 10upx;
				}

				.shanchu {
					margin-left: 10upx;
				}
			}
		}
	}
	uni-radio .uni-radio-input.uni-radio-input-checked:before {
		content: '\EA08';
	}
	.add.act {
		transform: translate(-50%, -50%);
	}
	.add {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80upx;
		margin-top: 40upx;
		text-align: center;
		font-size: 28upx;
		color: $color1;
		background-color: #fff;
		border-radius: 16upx;
		margin-left: 50%;
		width: 100%;
		margin-top: 12%;
		.iconfont {
			margin-right: 10upx;
		}
	}
}
</style>
